<!--#
layout("/layouts/platform.html"){
#-->
<style>
    .el-upload input[type=file] {
        display: none;
    }

    .el-upload__text {
        color: #606266;
        font-size: 14px;
        text-align: center;
    }
</style>
<div id="app"  v-cloak>
    <!--<div class="head"><div class="headone"><i class="el-icon-menu"></i><span >厂家信息</span></div></div>-->
    <el-row class="header navbar bg-white">
        <div class="btn-group tool-button" style="line-height: 50px;">
            设备编号：<el-input placeholder="设备编号" v-trim v-model="pageForm.code" size="mini" style="width:180px;" clearable></el-input>
            设备名称：<el-input placeholder="设备名称" v-trim v-model="pageForm.name" size="mini" style="width:180px;" clearable></el-input>
            设备状态：<el-cascader placeholder="设备状态" v-trim v-model="pageForm.status" size="mini" :options="allMap.statusOptions" clearable style="width:180px;"></el-cascader>
            <el-button slot="append" icon="el-icon-search" size="mini" @click="doSearch" circle></el-button>
        </div>
        <div class="pull-right offscreen-right" style="margin-right: 20px;line-height: 50px;">
             <el-tooltip class="item" effect="dark" content="新增">
                    <el-button type="primary" icon="el-icon-plus"  size="mini" @click="openAddDialog" circle></el-button>
             </el-tooltip>
        </div>
    </el-row>

    <el-row class="el-table-container">
        <el-table :data="tableData" @sort-change='pageOrder' height="520"  border size="small" header-align="center"  style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column
                    fixed="left"
                    prop="note"
                    label="操作"
                    width="120" header-align="center" align="center" >
                <template slot-scope="scope">
                    <el-dropdown @command="dropdownCommand" >
                        <el-button size="mini">
                            <i class="ti-settings"></i>
                            <span class="ti-angle-down"></span>
                        </el-button>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item divided :command="{type:'edit',row:scope.row}">
                                修改
                            </el-dropdown-item>
                            <el-dropdown-item divided :command="{type:'delete',row:scope.row}">
                                删除
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
            <el-table-column fixed="left" sortable="custom" prop="code" label="设备编号" width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="name" label="设备名称" width="200px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="status" label="设备状态" min-width="120px;" header-align="center" align="center" show-overflow-tooltip>
                <template slot-scope="scope" >{{getDict(scope.row.status,allMap.statusMap)}}</template>
            </el-table-column>
            <el-table-column sortable="custom" prop="model" label="规格型号" width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="detectionrange" label="检测范围" width="220px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="accuracy" label="精度要求" width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="factorycode" label="出厂编号" width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="number" label="数量（台/套）" min-width="130px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="company" label="制造厂商" min-width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="purchaseprice" label="购置价格（元）" min-width="130px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="purchasedate" label="购置日期" min-width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column  prop="calculate" label="溯源方式" min-width="120px;" header-align="center" align="center" show-overflow-tooltip>
                <template slot-scope="scope" >{{getDict(scope.row.calculate,allMap.calculateMap)}}</template>
            </el-table-column>
            <el-table-column  prop="calculateunit" label="溯源单位" min-width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column  prop="calculatecycle" label="溯源周期" min-width="120px;" header-align="center" align="center" show-overflow-tooltip>
                <template slot-scope="scope" >{{scope.row.calculatecycle}}{{getDict(scope.row.calculatecycletype,allMap.calculateCycleTypeMap)}}</template>
            </el-table-column>
            <el-table-column sortable="custom" prop="calculatedate" label="下次溯源日期" min-width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column  prop="reportcode" label="证书编号" min-width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column  prop="depositadress" label="存放地点" min-width="220px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column  prop="managername" label="设备责任人" min-width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column  prop="applyname" label="使用部门" min-width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column  prop="classification" label="分类情况" min-width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column  prop="importedflag" label="是否进口设备" min-width="120px;" header-align="center" align="center" show-overflow-tooltip>
                <template slot-scope="scope" >
                    <span v-if="scope.row.importedflag==0">是</span>
                    <span v-else>否</span>
                </template>
            </el-table-column>
            <el-table-column  prop="assetcode" label="资产编号" min-width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column  prop="supplyphone" label="供货商联系电话" min-width="150px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column  prop="remark" label="备注" min-width="320px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>

        </el-table>
    </el-row>
    <el-row class="el-pagination-container">
        <el-pagination @size-change="pageSizeChange" @current-change="pageNumberChange" :current-page="pageForm.pageNumber" :page-sizes="[10, 20, 30, 50]"
                       :page-size="pageForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageForm.totalCount">
        </el-pagination>
    </el-row>

    <el-dialog :close-on-click-modal="false" append-to-body   title="设备信息"  :visible.sync="addDialogVisible" width="1200px">
        <el-form id="addForm"  :rules="formRules" :model="formData" ref="addForm"  size="small" label-width="120px" >
            <el-row :gutter="20" border>
                <el-col :span="8">
                    <el-form-item prop="code" label="设备编号" >
                        <el-input maxlength="16"v-trim v-model="formData.code" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="name" label="设备名称" >
                        <el-input maxlength="16"v-trim v-model="formData.name" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="model" label="规格型号">
                        <el-input maxlength="32"v-trim v-model="formData.model" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="detectionRange" label="检测范围" >
                        <el-input maxlength="32"v-trim v-model="formData.detectionRange" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="accuracy" label="精度要求" >
                        <el-input maxlength="32"v-trim v-model="formData.accuracy" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="factoryCode" label="出厂编号">
                        <el-input maxlength="16"v-trim v-model="formData.factoryCode" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="number" label="数量（台/套）" >
                        <el-input-number maxlength="32"v-trim v-model="formData.number" type="text"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item prop="status" label="设备状态" >
                        <el-cascader v-model="formData.status" :options="allMap.statusOptions" style="width:180px;"></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="company" label="制造厂商">
                        <el-input maxlength="32"v-trim v-model="formData.company" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="purchasePrice" label="购置价格（元）" >
                        <el-input-number maxlength="32"v-trim v-model="formData.purchasePrice" type="text"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="purchaseDate" label="购置日期" >
                        <el-date-picker type="date"  v-trim v-model="formData.purchaseDate" value-format="yyyy-MM-dd" style="width: 180px;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8" >
                    <el-form-item prop="calculate" label="溯源方式">
                        <el-cascader v-model="formData.calculate" :options="allMap.calculateOptions" style="width:180px;"></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  prop="calculateUnit" label="溯源单位" >
                        <el-input maxlength="16"v-trim v-model="formData.calculateUnit" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="calculateCycle" label="溯源周期" >
                        <el-input-number maxlength="10"v-trim v-model="formData.calculateCycle" type="text"></el-input-number>
                        <el-cascader v-model="formData.calculateCycleType" :options="allMap.calculateCycleTypeOptions" style="width:80px;"></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="calculateDate" label="下次溯源日期">
                        <el-date-picker type="date"  v-trim v-model="formData.calculateDate" value-format="yyyy-MM-dd" style="width: 180px;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="reportCode" label="证书编号" >
                        <el-input maxlength="32"v-trim v-model="formData.reportCode" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="depositAdress" label="存放地点" >
                        <el-input maxlength="125"v-trim v-model="formData.depositAdress" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="managerBy" label="设备责任人" >
                        <el-cascader v-model="formData.managerBy" :options="allMap.userOptions" filterable placeholder="搜索"  style="width:180px;" ></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="applyDept" label="使用部门">
                        <el-cascader v-model="formData.applyDept" :options="allMap.unitOptions" filterable placeholder="搜索"  style="width:180px;"></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="classification" label="分类情况" >
                        <el-input maxlength="16"v-trim v-model="formData.classification" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="importedFlag" label="是否进口设备" >
                        <el-radio-group v-model="formData.importedFlag">
                            <el-radio label="0">是</el-radio>
                            <el-radio label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="assetCode" label="资产编号">
                        <el-input maxlength="16"v-trim v-model="formData.assetCode" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="supplyPhone" label="供货商联系电话" >
                        <el-input maxlength="16"v-trim v-model="formData.supplyPhone" type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item prop="remark" label="备注" >
                        <el-input maxlength="125"v-trim v-model="formData.remark" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="doAdd">确 定</el-button>
        </span>
    </el-dialog>
</div>
<style scoped>
    .el-table--border th.gutter:last-of-type {
        display: block !important;
        width: 17px !important;
    }

</style>
<script>
    var allMap = {statusMap:${statusMap},statusOptions:${statusOptions},calculateMap:${calculateMap},calculateOptions:${calculateOptions}
        ,calculateCycleTypeMap:${calculateCycleTypeMap},calculateCycleTypeOptions:${calculateCycleTypeOptions},unitOptions:${unitOptions},userOptions:${userOptions}}
    new Vue({
        el: "#app",
        data: function () {
            return {
                allMap:allMap,
                tableData: [],
                addDialogVisible:false,
                pageForm: {},
                formData: {calculateCycle:1,calculateCycleType:'year',importedFlag:'0'},
                formRules: {
                    code: [{required: true, message: '设备编号不能为空', trigger: ['blur', 'change']}],
                    name: [{required: true, message: '设备名称不能为空', trigger: ['blur', 'change']}],
                    model: [{required: true, message: '规格型号不能为空', trigger: ['blur', 'change']}],
                    detectionRange: [{required: true, message: '检测范围不能为空', trigger: ['blur', 'change']}],
                    accuracy: [{required: true, message: '精度要求不能为空', trigger: ['blur', 'change']}],
                    factoryCode: [{required: true, message: '出厂编号不能为空', trigger: ['blur', 'change']}],
                    number: [{required: true, message: '数量不能为空', trigger: ['blur', 'change']}],
                    status: [{required: true, message: '请选择设备状态', trigger: ['blur', 'change']}],
                    company: [{required: true, message: '制造厂商不能为空', trigger: ['blur', 'change']}],
                    purchasePrice: [{required: true, message: '购置价格不能为空', trigger: ['blur', 'change']}],
                    purchaseDate: [{required: true, message: '购置日期不能为空', trigger: ['blur', 'change']}],
                    calculate: [{required: true, message: '请选择溯源方式', trigger: ['blur', 'change']}],
                    calculateUnit: [{required: true, message: '溯源单位不能为空', trigger: ['blur', 'change']}],
                    calculateCycle: [{required: true, message: '请选择溯源周期', trigger: ['blur', 'change']}],
                    calculateCycleType: [{required: true, message: '请选择溯源周期类型', trigger: ['blur', 'change']}],
                    calculateDate: [{required: true, message: '下次溯源日期不能为空', trigger: ['blur', 'change']}],
                    reportCode:[{required: true, message: '证书编号不能为空', trigger: ['blur', 'change']}],
                    depositAdress:[{required: true, message: '存放地点不能为空', trigger: ['blur', 'change']}],
                    classification:[{required: true, message: '分类情况不能为空', trigger: ['blur', 'change']}],
                    importedFlag:[{required: true, message: '请选择是否进口设备', trigger: ['blur', 'change']}],
                    assetCode:[{required: true, message: '资产编号不能为空', trigger: ['blur', 'change']}],
                    supplyPhone: [{required: true, message: '供货商联系电话不能为空', trigger: ['blur', 'change']},
                        {pattern: /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$|^\((0[0-9]{2,3})\)-?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$|^1[3456789]\d{9}$|^\/$/, message: '只能输入手机号码、座机号码或斜杠/'}],
                    managerBy: [{required: true, message: '请选择设备责任人', trigger: ['blur', 'change']}],
                    applyDept: [{required: true, message: '请选择使用部门', trigger: ['blur', 'change']}],
                },
            }
        },
        methods: {
            doAdd: function () {
                var self = this;
                self.$refs["addForm"].validate(function (valid) {
                    if (valid) {
                        if(nONull(self.formData.status)){self.formData.status = self.formData.status.join(",");}
                        if(nONull(self.formData.calculate)){self.formData.calculate = self.formData.calculate.join(",");}
                        if(nONull(self.formData.calculateCycleType)){self.formData.calculateCycleType = self.formData.calculateCycleType.join(",");}
                        if(nONull(self.formData.managerBy)){self.formData.managerBy = self.formData.managerBy.join(",");}
                        if(nONull(self.formData.applyDept)){self.formData.applyDept = self.formData.applyDept.join(",");}
                        var url = "/platform/bus/equipment/addDo";
                        if(nONull(self.formData.id)){
                            url = "/platform/bus/equipment/editDo";
                        }
                        $.post(base + url, self.formData, function (data) {
                            if (data.code == 0) {
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                self.addDialogVisible = false;
                                self.pageData();//添加失败也可以入库,所以加载一下看看
                            } else {
                                if(nONull(self.formData.status)){self.formData.status = self.formData.status.split(",");}
                                if(nONull(self.formData.calculate)){self.formData.calculate = self.formData.calculate.split(",");}
                                if(nONull(self.formData.calculateCycleType)){self.formData.calculateCycleType = self.formData.calculateCycleType.split(",");}
                                if(nONull(self.formData.managerBy)){self.formData.managerBy = self.formData.managerBy.split(",");}
                                if(nONull(self.formData.applyDept)){self.formData.applyDept = self.formData.applyDept.split(",");}
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            openAddDialog:function(){
                this.addDialogVisible=true;
                this.formData ={number:1,status:"1",calculateCycle:1,calculateCycleType:'year',importedFlag:'0'}//打开新增窗口,表单先清空
                if(nONull(this.formData.status)){this.formData.status = this.formData.status.split(",");}
                if(nONull(this.formData.calculate)){this.formData.calculate = this.formData.calculate.split(",");}
                if(nONull(this.formData.calculateCycleType)){this.formData.calculateCycleType = this.formData.calculateCycleType.split(",");}
                if (this.$refs["addForm"])
                    this.$refs["addForm"].resetFields();
                this.formData.importedFlag="1";
                this.formData=JSON.parse(JSON.stringify(this.formData));
            },
            pageOrder: function (column) {//按字段排序
                this.pageForm.pageOrderName = column.prop;
                this.pageForm.pageOrderBy = column.order;
                this.pageData();
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                if(nONull(self.pageForm.status)){self.pageForm.status = self.pageForm.status.join(",");}
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/equipment/dataIndex", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                        if(nONull(self.pageForm.status)){self.pageForm.status = self.pageForm.status.split(",");}
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doSearch: function () {
                this.pageForm.pageNumber = 1;
                this.pageData();
            },

            dropdownCommand: function (command) {//监听下拉框事件
                var self = this;
                if ("delete" == command.type) {
                    self.$confirm('此操作将删除 ' + command.row.name, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        callback: function (a, b) {
                            if ("confirm" == a) {//确认后再执行
                                $.post(base + "/platform/bus/equipment/delete/" + command.row.id, {}, function (data) {
                                    if (data.code == 0) {
                                        self.$message({
                                            message: data.msg,
                                            type: 'success'
                                        });
                                        self.doSearch();
                                    } else {
                                        self.$message({
                                            message: data.msg,
                                            type: 'error'
                                        });
                                    }
                                }, "json");
                            }
                        }
                    });
                }
                if("edit" == command.type){//修改
                    //根据id获取数据
                    $.post(base + "/platform/bus/equipment/detail/" + command.row.id, {}, function (data) {
                        if (data.code == 0) {
                            self.formData =  data.data;
                            if(nONull(self.formData.status)){self.formData.status = self.formData.status.split(",");}
                            if(nONull(self.formData.calculate)){self.formData.calculate = self.formData.calculate.split(",");}
                            if(nONull(self.formData.calculateCycleType)){self.formData.calculateCycleType = self.formData.calculateCycleType.split(",");}
                            if(nONull(self.formData.managerBy)){self.formData.managerBy = self.formData.managerBy.split(",");}
                            if(nONull(self.formData.applyDept)){self.formData.applyDept = self.formData.applyDept.split (",");}
                        } else {
                            self.$message({message: data.msg,type: 'error'});
                        }
                    }, "json");
                    //打开窗口
                    this.addDialogVisible=true;
                }
            },
            getDict: function (val,map) {
                if (val!= null && val!=undefined &&val!="" &&val!="null" &&val!="undefined" && map!=null && map !=undefined){
                    var str = val.split(",");
                    var strname="";
                    for (var a=0;a<str.length;a++){
                        strname+=map[str[a]];
                        if(strname == null){
                            alert(1)
                        }
                        if(a<(str.length-1)){
                            strname+="/";
                        }
                    }
                    return strname;
                }
                return "";
            },
            handleSelectionChange: function (val) {
                this.multipleSelection = val;
            }
        },
        created: function () {
            this.doSearch();
        }
    });

    function nONull(val){
        if (val!= null && val!=undefined &&val!="" &&val!="null" &&val!="undefined" ){
            return true;
        }else{
            return false;
        }
    }
</script>
<!--#
}
#-->
